<template>
  <el-form
    class="collapse-form"
    :class="{'collapse__hidden': !showMore}"
    :style="{ 'padding-right': !showMore ? buttonsWidth : 0 }"
    ref="form"
    :model="model"
    :label-width="labelWidth"
    inline
    @submit.native.prevent
  >
    <slot></slot>
    <section>
      <slot name="buttons"></slot>
      <template v-if="collapse">
        <el-button
          v-if="!showMore"
          type="text"
          @click="showMore = true"
        >展开<i class="el-icon-arrow-down"></i></el-button>
        <el-button
          v-else
          type="text"
          @click="showMore = false"
        >收起<i class="el-icon-arrow-up"></i></el-button>
      </template>
    </section>
  </el-form>
</template>

<script>
export default {
  name: 'SearchForm',
  props: {
    // 表单数据对象
    model: {},
    // 字段长度
    labelWidth: {
      default: '100px'
    },
    // 是否需要展开/收起
    collapse: {
      default: false
    },
    // 按钮占据的宽度
    buttonsWidth: {
      default: '275px'
    }
  },
  data () {
    return {
      showMore: false
    }
  },
  methods: {
    // 重置字段值
    resetFields () {
      this.$refs.form.resetFields()
    }
  }
}
</script>

<style scoped lang="scss">
.collapse-form {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  height: auto;
  // 操作按钮
  section {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
    align-items: flex-end;
    .el-button {
      i {
        margin-left: 3px;
      }
    }
  }
  // 表单样式
  .el-form-item__content {
    min-width: 192px;
  }
  // 隐藏状态
  &.collapse__hidden {
    height: 50px;
    overflow: hidden;
    section {
      width: 300px;
      position: absolute;
      margin-bottom: 20px;
      top: 0;
      right: 0;
    }
  }
}
</style>
